<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="../../style/login/login.css">
    <link rel="short cut" href="../../favicon.ico"/>
    <!-- <link href="css/login.css" rel="stylesheet"> -->
    <script type="text/javascript" src="../../plugins/jQuery/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="../../plugins/vue/vue.js"></script>
    <script type="text/javascript" src="../../plugins/axios/axios.js"></script>
    <script type="text/javascript" src="../../plugins/layer-master/dist/layer.js"></script>
</head>

<body>
<div id="app">
    <form id="form" method="post">
        <h1 id="loginMsg">LOGIN IN</h1>
        <p><label for="username">Username:</label><input id="username" v-model="username" name="username" type="text" autocomplete="off">
        </p>

        <p><label for="password">Password:</label><input id="password" v-model="password" name="password" type="password" @keyup.enter="login"></p>
        <div id="subDiv">
            <input type="button" @click="login" class="loginButton" value="login up">
            <input type="reset" class="button" value="reset">&nbsp;&nbsp;&nbsp;
        </div>
    </form>
</div>

<script type="text/javascript">

    // 取消vue的开发模式
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data: {
            username: "",
            password: ""
        },
        methods: {
            login() {
                axios({
                    method: "POST",
                    url: "/user/login",
                    data: {
                        username: this.username,
                        password: this.password
                    }
                }).then(res => {
                    if (String(res.data.code) === '1') {
                        localStorage.setItem("userInfo", JSON.stringify(res.data.data));
                        location.href ="../../index.html";
                    } else {
                        layer.msg(res.data.msg, {
                            icon: 2,
                            offset: 't',
                            anim: 6
                        });
                    }
                })
            }
        }
    })
</script>

</body>
</html>